<template>
	<view class="map">
		<u-toast ref="uToast" /><u-no-network></u-no-network>
		<u-navbar title="销售商分布" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>

		<view class="content">
			<map id="map" :latitude="lat" :longitude="lng" :scale="6" :enable-3D="true" :show-compass="true"
				:enable-overlooking="true" :enable-traffic="true" :markers="covers" @markertap="handleMarkerTap">
			</map>

			<view class="popup" v-if="popShow">
				<view class="close" @click="handleClose">x</view>
				<view class="row">
					<view class="lable">销售商名称: </view>
					<view class="val">{{popName}} </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				lat: 0,
				lng: 0,
				covers: [],
				height: 0,
				popName: '',
				popShow: false
			}
		},
		onShareAppMessage: function(res) {
			if (res.from === 'button') {
				// 来自按钮的分享
				console.log(res.target)
			}
			return {
				title: '销售商分布',
				path: '/pages/supperMap/map/index',
				// imageUrl: ''
			}
		},
		onShareTimeline() {},
		onShow() {
			// const res = uni.getSystemInfoSync();
			const _this = this
			// #ifdef MP-WEIXIN
			wx.getFuzzyLocation({
				type: 'wgs84',
				success(res) {
					_this.lat = res.latitude;
					_this.lng = res.longitude;
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					_this.$u.api.GetDealerPageListAPI({
						latitude: res.latitude,
						longitude: res.longitude
					}).then(data => {
						if (data.code == 0) {
							let marks = data.data.map((item, idx) => ({
								id: idx,
								latitude: item.latitude,
								longitude: item.longitude,
								iconPath: '/static/images/map/location.png',
								width: 15,
								height: 23,
								info: {
									name: item.name
								}
							}))
							// let marks = [{
							// 	id: 0,
							// 	latitude: res.latitude,
							// 	longitude: res.longitude,
							// 	iconPath: '/static/images/map/location.png',
							// 	width: 15,
							// 	height: 23,
							// }]
							_this.covers = marks;
						}
					})
					console.log('当前位置的经度1：' + res);
				},
				fail: function() {
					_this.$u.toast("获取您的经纬度坐标失败")
				}
			})
			// #endif
			// uni.getLocation({
			// 	type: 'wgs84',
			// 	success: function(res) {
			// 		this.lat = res.latitude;
			// 		this.lng = res.longitude;
			// 		console.log('当前位置的经度：' + res.longitude);
			// 		console.log('当前位置的纬度：' + res.latitude);

			// 		let marks = [{
			// 			id: 0,
			// 			latitude: res.latitude,
			// 			longitude: res.longitude,
			// 			iconPath: '/static/images/map/location.png',
			// 			width: 15,
			// 			height: 23,
			// 		}]
			// 		this.covers = marks;
			// 	},
			// 	fail: function(error) {
			// 		console.log(error);
			// 		// this.$u.toast("获取您的经纬度坐标失败", error)
			// 	}
			// });
		},
		methods: {
			handleMarkerTap(e) {
				const data = this.covers[e.detail.markerId]
				this.popShow = true
				this.popName = data.info?.name ?? '暂无命名'
				console.log();
				console.log(e.detail.markerId);
			},
			handleClose() {
				this.popShow = false
				this.popName = ''
			}
		}
	}
</script>

<style scoped lang="scss">
	.map {
		width: 100vw;
		height: 100vh;

		.content {
			position: relative;
			width: 100%;
			height: 100%;

			#map {
				width: 100%;
				height: 100%;
			}

			.popup {
				position: absolute;
				left: 50%;
				bottom: 255rpx;
				width: 340rpx;
				transform: translate(-50%);
				height: 80rpx;
				background-color: #fff;
				border-radius: 24rpx;
				display: flex;
				align-items: center;

				.close {
					position: absolute;
					top: 6rpx;
					right: 6rpx;
					color: red;
					font-size: 26rpx;
				}


				.row {
					display: flex;
					align-items: center;
					font-size: 30rpx;

					.label {
						margin-right: 12rpx;
					}

					.val {
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>